import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:overlay_support/overlay_support.dart';
import 'package:provide/provide.dart';
import 'package:qgchat/common/class/upload/upload.dart';
import 'package:qgchat/common/global/global.dart';
import 'package:qgchat/http/apis/live.dart';
import 'package:qgchat/states/states_model/index.dart';
import 'package:qgchat/widgets/Zego/ZegoFace.dart';
import 'package:qgchat/widgets/Zego/ZegoPreview.dart';

class ReadyLive extends StatelessWidget {
  ReadyLive({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Stack(
        children: [
          // ZegoPreviewBox(),
          _ShadowMask(),
          _Body(),
        ],
      ),
    );
  }
}

// 阴影遮罩
class _ShadowMask extends StatelessWidget {
  const _ShadowMask({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.black12.withOpacity(.3),
      ),
    );
  }
}

// 内容
class _Body extends StatelessWidget {
  final ValueNotifier<String> coverPath = ValueNotifier(null);
  final TextEditingController nameCtrl = TextEditingController();
  _Body({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final top = MediaQuery.of(context).padding.top;
    return Container(
      padding: EdgeInsets.only(top: top),
      child: SingleChildScrollView(
        child: Column(
          children: [
            _TopBtn(),
            _Cover(coverPath),
            _LiveName(nameCtrl),
            _OpenLiveBtn(
              coverPath: coverPath,
              nameCtrl: nameCtrl,
            ),
          ],
        ),
      ),
    );
  }
}

// 顶部操作面板
class _TopBtn extends StatelessWidget {
  const _TopBtn({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Spacer(),
        IconButton(
          onPressed: () => ZegoFace.instance.show(context),
          icon: Image.asset(
            "assets/images/icon/beauty.png",
            width: px(40),
            height: px(40),
            fit: BoxFit.contain,
          ),
        ),
        IconButton(
          onPressed: () => Navigator.of(context).pop(),
          icon: Icon(
            Icons.close,
            color: Colors.white,
          ),
        ),
      ],
    );
  }
}

// 开启直播按钮
class _OpenLiveBtn extends StatelessWidget {
  final ValueNotifier<String> coverPath;
  final TextEditingController nameCtrl;
  const _OpenLiveBtn({
    this.coverPath,
    this.nameCtrl,
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: px(690),
      height: px(100),
      margin: EdgeInsets.only(top: px(100)),
      child: FlatButton(
        onPressed: () {
          if (nameCtrl.text.length <= 0) {
            toast('未填写直播标题');
          }
          if (coverPath.value.length <= 0) {
            toast('未上传直播封面');
          }

          final user = Provide.value<UserState>(context).info;
          LiveApis.liveOpen(
            user.id,
            nameCtrl.text,
            coverPath.value,
          ).then((id) {
            goPage(
              context,
              "/liveRoom",
              param: {"id": id},
              replace: true,
            );
          });
        },
        color: col('4bd5e2'),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(px(50)),
        ),
        child: Text(
          '开启直播',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

// 封面
class _Cover extends StatefulWidget {
  final ValueNotifier<String> coverPath;
  _Cover(this.coverPath, {Key key}) : super(key: key);

  @override
  __CoverState createState() => __CoverState();
}

class __CoverState extends State<_Cover> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: px(300),
      height: px(300),
      margin: EdgeInsets.only(top: px(100)),
      color: Colors.black38,
      child: Stack(
        alignment: Alignment.center,
        children: [
          if (widget.coverPath.value != null)
            Image.network(
              widget.coverPath.value,
              width: px(300),
              height: px(300),
              fit: BoxFit.cover,
            ),
          Container(
            width: px(300),
            height: px(300),
            child: FlatButton(
              onPressed: () {
                Upload.qiniu(context).then((value) {
                  widget.coverPath.value = value;
                  setState(() {});
                });
              },
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    Icons.add,
                    color: Colors.white,
                  ),
                  Text(
                    '封面',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

// 填写直播间名字
class _LiveName extends StatelessWidget {
  final TextEditingController nameCtrl;
  const _LiveName(this.nameCtrl, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: px(690),
      margin: EdgeInsets.only(top: px(30)),
      child: CupertinoTextField(
        controller: nameCtrl,
        maxLength: 45,
        placeholder: '给你的直播选个名字吧...',
        placeholderStyle: TextStyle(color: Colors.white54),
        style: TextStyle(color: Colors.white),
        decoration: null,
      ),
    );
  }
}
